<template>
	<div>
		<div class="title-div">
			<h2 class="title">最新MV</h2>
			<span class="sub-title">给你推荐15个MV</span>
		</div>
		<div class="items">
		<div class="item" v-for="item in songsList" :key="item.id" >
			<div  @click="toPlay(item.id)" class="div-img">
				<el-image class="el-image" :src="item.cover" fit="cover" style="width: 100%">
				</el-image>
			</div>
			<div>
				<div class="name">{{ item.name }}</div>
				<div class="singer">{{ item.artistName }}</div>
			</div>
			</div>
		</div>
		<div style="height: 200px">

		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "Songs",
		data(){
			return{
				songsList:[],
				url:'',
			};
		},
		methods:{
			toPlay (id) {
				// 携带参数跳转路由
				this.$router.push({
					name: 'playMv',
					params: {
						id: id,
					},
				})
			},
			showMv (){
				axios({
					url:'https://autumnfish.cn/mv/first?limit=15',
					method:'get',
					param:{
					}
				}).then(res=>{
					console.log(res);
					this.songsList=res.data.data;
				})
			}

		},

		beforeMount() {
			this.showMv();
		}

	}
</script>

<style type="text/css">
	.items {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.item{
	}
	.div-img{

	}
	.el-image{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 120px;
		border-radius: 5px
	}
	.title-div{
		display: flex;
		align-items: flex-end;
	}
	.title{
		margin-right: 10px;
	}
	.sub-title{
		font-size: 15px;
		color: #bebebe;
	}
	.singer{
		font-size: 8px;
		color: #bebebe;
	}
	.name{
		margin-right: 10px;
	}
</style>

